<template>
    <div>
        <van-nav-bar title="首页" />
        <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
        <van-tabs v-model:active="active">
            <van-tab title="乐虎"></van-tab>
            <van-tab title="东鹏特饮"></van-tab>
            <van-tab title="菠萝蜜"></van-tab>
            <van-tab title="利群"></van-tab>
            <van-tab title="红塔山"></van-tab>
            <van-tab title="玉溪"></van-tab>
            <van-tab title="茉莉蜜茶"></van-tab>
        </van-tabs>
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" style="width: 100%; height: 200px;" />
            </van-swipe-item>
        </van-swipe>
        <van-grid>
            <van-grid-item icon="location" text="乐虎" />
            <van-grid-item icon="like" text="东鹏特饮" />
            <van-grid-item icon="fire" text="波罗蜜" />
            <van-grid-item icon="coupon" text="利群" />
        </van-grid>
    </div>
</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-6.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-7.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-8.jpeg',
];
</script>

<style lang="scss" scoped></style>